<template>
    <el-container>
        <!-- 侧边栏 -->
        <el-aside :width="toggleShow ? '65px':'200px'">
            <p class="title">优点达资讯后台</p>
            <!-- 导航菜单部分 -->
            <el-menu
                :collapse="toggleShow"
                :default-active="$route.path"
                class="el-menu-vertical-demo"
                text-color="#fff"
                active-text-color="#fff"
                :unique-opened="true"
                background-color="#262a32"
                router
                :collapse-transition="false"
            >
                <el-menu-item index="/index">
                    <i class="el-icon-s-home"></i>
                    <span>后台首页</span>
                </el-menu-item>
                <el-menu-item index="/menu">
                    <i class="el-icon-folder-opened"></i>
                    <span>分类管理</span>
                </el-menu-item>
                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-document"></i>
                        <span>文章管理</span>
                    </template>
                    <el-menu-item index="/article">文章列表</el-menu-item>
                    <el-menu-item index="/addarticle">添加文章</el-menu-item>
                </el-submenu>
                <el-submenu index="4">
                    <template slot="title">
                        <i class="el-icon-document"></i>
                        <span>视频管理</span>
                    </template>
                    <el-menu-item index="/video">视频列表</el-menu-item>
                    <el-menu-item index="/videoAdd">添加视频</el-menu-item>
                </el-submenu>

                <el-menu-item index="/tag">
                    <i class="el-icon-magic-stick"></i>
                    <span>标签管理</span>
                </el-menu-item>
                <el-submenu index="6">
                    <template slot="title">
                        <i class="el-icon-data-line"></i>
                        <span>广告管理</span>
                    </template>
                    <el-menu-item index="/advpos">广告位管理</el-menu-item>
                    <el-menu-item index="/advimg">广告图管理</el-menu-item>
                </el-submenu>
                <el-submenu index="7">
                    <template slot="title">
                        <i class="el-icon-user"></i>
                        <span>用户管理</span>
                    </template>
                    <el-menu-item index="/userList">用户列表</el-menu-item>
                    <el-menu-item index="/userAdd">添加用户</el-menu-item>
                </el-submenu>
                <el-menu-item index="/link">
                    <i class="el-icon-paperclip"></i>
                    <span>友情链接</span>
                </el-menu-item>
                <el-submenu index="9">
                    <template slot="title">
                        <i class="el-icon-user-solid"></i>
                        <span>管理员管理</span>
                    </template>
                    <el-menu-item index="/adminList">管理员列表</el-menu-item>
                    <el-menu-item index="/adminQx">权限管理</el-menu-item>
                </el-submenu>
                <el-submenu index="10">
                    <template slot="title">
                        <i class="el-icon-setting"></i>
                        <span>设置管理</span>
                    </template>
                    <el-menu-item index="/webset">网站信息</el-menu-item>
                    <el-menu-item index="/setArtilce">文章设置</el-menu-item>
                </el-submenu>
            </el-menu>
        </el-aside>
        <!-- 中间部分 -->
        <el-container>
            <el-header height="60px">
                <span>
                    <span style="margin-right:30px">
                        <i class="el-icon-s-fold" @click="toggleShow=true" v-if="!toggleShow"></i>
                        <i class="el-icon-s-unfold" @click="toggleShow=false" v-else></i>
                    </span>
                    <span v-if="$route.path=='/index'">首页</span>
                    <router-link v-else style="font-weight: 700;" to="/index">首页 ></router-link>
                    <span>{{$route.matched[1].meta.title}}</span>
                    <el-button
                        size="samll"
                        @click="$router.back()"
                        icon="el-icon-back"
                        circle
                        style="margin-left:30px"
                        v-if="$route.path!='/index'"
                    ></el-button>
                </span>
                <el-dropdown>
                    <span class="el-dropdown-link">
                        admin(超级管理员)
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>锁定屏幕</el-dropdown-item>
                        <el-dropdown-item @click.native="logout">退出后台</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-header>
            <el-main>
                <router-view></router-view>
            </el-main>
            <el-footer>优点达资讯 @ 玉哥版权所有</el-footer>
        </el-container>
    </el-container>
</template>
<script>
export default {
    data() {
        return {
            toggleShow: false,
        };
    },
    methods: {
        async logout() {
            try {
                await this.$confirm("您确定要退出吗?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                });
                localStorage.removeItem("userinfo");
                this.$router.push("/login");
            } catch (error) {
                this.$message.error("取消退出");
            }
        },
    },
};
</script>
<style scoped>
.el-container {
    height: 100vh;
}
.is-active {
    background-color: #fb6d49 !important;
}
.el-aside {
    text-align: left;
}
.el-aside {
    background-color: #262a32;
    transition: all 0.5s;
}
.el-menu {
    border-right: 0 solid;
}
.title {
    height: 60px;
    text-align: center;
    line-height: 60px;
    color: #fff;
    font-size: 20px;
    letter-spacing: 3px;
    font-family: "\6977\4F53";
}
.el-main {
    background-color: #f2f4f8;
}
.el-header {
    padding: 0px 20px;
    display: flex;
    justify-content: space-between;
    line-height: 60px;
}
</style>
